<template>
	<view class="login_wrap">
		<image class="img" src="../../static/login/logo.png"></image>
		<image class="name" src="../../static/login/name.png"></image>
		<view class="input_wrap">
			<view class="label label1">
				<image class="img" src="../../static/login/phone.png"></image>
				<view>账号</view>
			</view>
			<view class="account_wrap">
				<input class="uni-input" v-model="username" focus placeholder="输入账号" />
				<image class="close_account" @click="clearInput" src="../../static/login/close.png"></image>
			</view>
			
			<view class="label label2">
				<image class="img" src="../../static/login/password.png"></image>
				<view>密码</view>
			</view>
			<view class="pwd_wrap">
				<input class="uni-input" v-model="password" placeholder="请输入密码" :password="showPassword" />
				<image class="eye_pwd" @click="changePassword" v-if="showPassword" src="../../static/login/show_pwd.png"></image>
				<image class="eye_pwd" @click="changePassword" v-else src="../../static/login/hide_pwd.png"></image>
				<view class="error">
					<image class="img" src="../../static/login/notice.png"></image>
					<view class="error_info">账号或密码不正确</view>
				</view>
			</view>
			<view class="submit">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
				username: '',
				password: ''
			}
		},
		methods: {
			changePassword() {
				this.showPassword = !this.showPassword
				console.log('changePassword')
			},
			clearInput() {
				this.username = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
.login_wrap{
	width: 100%;
	height: 100%;
	padding: 158rpx 130rpx;
	box-sizing: border-box;
	font-family: PingFang SC;
	background: url('../../static/login/bg.png') no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	.img{
		width: 219rpx;
		height: 219rpx;
		margin-bottom: 37rpx;
	}
	.name{
		width: 436rpx;
		height: 46rpx;
		margin-bottom: 180rpx;
	}
	.input_wrap{
		width: 100%;
		.label{
			display: flex;
			font-weight: 400;
			font-size: 33rpx;
			color: #616E87;
			line-height: 27rpx;
			
			.img{
				margin-right: 21rpx;
			}
		}
		.label1{
			.img{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.label2{
			.img{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.uni-input{
			background: rgba(255, 255, 255, 0);
			padding-left: 0;
			padding-right: 0;
			border-bottom: 3rpx solid #3761D2;
			margin-bottom: 91rpx;
			font-weight: 500;
			font-size: 33rpx;
			color: #000000;
		}
		.uni-input-placeholder{
			font-weight: 400;
			font-size: 33rpx;
			color: #C7C7D4;
		}
	}
	.pwd_wrap{
		position: relative;
		
		.eye_pwd{
			width: 51rpx;
			height: 29rpx;
			position: absolute;
			right: 0;
			top: 30rpx;
		}
	}
	.account_wrap{
		position: relative;
		.close_account{
			width: 37rpx;
			height: 37rpx;
			position: absolute;
			right: 0;
			top: 20rpx;
		}
	}
	.error{
		display: flex;
		position: absolute;
		top: 100rpx;
		.img{
			width: 31rpx;
			height: 31rpx;
			margin-right: 15rpx;
		}
		.error_info{
			font-weight: 400;
			font-size: 29rpx;
			color: #F23A54;
			line-height: 27rpx;
		}
	}
	.submit{
		width: 491rpx;
		height: 87rpx;
		background: #3761D2;
		box-shadow: 0rpx 9rpx 34rpx 0rpx rgba(0,85,255,0.47);
		border-radius: 43rpx;
		margin-top: 221rpx;
		font-weight: 400;
		font-size: 37rpx;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}
}

</style>
